<template>
    <div class="file-item">
        <div class="body">
            <div 
            class="preview"
            >
                <el-image
                    class="image"
                    :src="calcPicSrc.src"
                    fit="cover"
                    :preview-src-list="calcPicSrc.preview"
                ></el-image>

                <div 
                v-if="data.isopen === '1'"
                class="icon-share"
                >
                    享
                </div>
            </div>

            <div class="info">
                <div class="head">
                    <file-name-editor 
                        v-model="data.filename"
                        :data="data"
                    ></file-name-editor>
                </div>

                <div class="foot">
                    <div class="top">
                        {{data.mobile}}上传
                    </div>

                    <div class="bottom">
                        <div class="left">
                            {{data.fileuptime}}
                        </div>

                        <div class="right">
                            
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="foot">
            <template v-if="data.isopen === '0'">
                <div 
                class="btn" 
                @click="shareHandler"
                >
                    共享
                    <template v-if="data.sharenum">
                        ({{data.sharenum}})
                    </template>
                </div>

                <div 
                class="btn" 
                @click="editHandler"
                >
                    修改
                </div>
            </template>

            <template v-if="data.isopen === '1'">
                <template v-if="~['doc', 'docx'].indexOf(data.filetype)">
                    <div 
                    class="btn" 
                    @click="docViewHandler"
                    >
                        查看
                    </div>

                    <div 
                    class="btn" 
                    @click="copyHandler"
                    >
                        复制副本
                    </div>
                </template>
            </template>

            <div class="btn" @click="downloadHandler">下载</div>
            
            <div 
            v-if="!hidedel"
            class="btn" 
            @click="delHandler"
            >
                删除
            </div>
        </div>

        <component 
            :is="dialogComponent"
            v-model="dialogVisible"
            :data="data"
            @reload="reloadHandler"
        ></component>

        <div 
        v-if="infoText"
        class="infotip warning" 
        >
            <i class="btn-close el-icon-close" @click="setReadHandler"></i>
            {{infoText}}
        </div>
    </div>
</template>

<script>
import DialogUpload from './dialog-upload/dialog-upload.vue';
import DialogShare from './dialog-share';
import FileNameEditor from './file-name-editor.vue';

import wordPic from '../assets/word.png';
import pdfPic from '../assets/pdf.png'
import excelPic from '../assets/excel.png'

export default {
    components: {
        DialogUpload,
        DialogShare,
        FileNameEditor,
    },
    props: {
        data: {
            type: Object,
            default: () => ({
                /*
                shbj
                    0 草稿
                    1 非草稿
                isopen
                    0 本人的
                    1 分享的
                */
            }),
        },
        hidedel: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            dialogVisible: false,
            dialogComponent: '',
        };
    },
    computed: {
        isImg() {
            return ~['jpg', 'jpeg', 'png',].indexOf(this.data.filetype);
        },
        calcPicSrc() {
            var that = this;

            var config = [
                {
                    test: () => ~['jpg', 'jpeg', 'png',].indexOf(this.data.filetype),
                    src: that.data.filesavepath,
                    preview: [that.data.filesavepath],
                },
                {
                    test: () => ~['doc', 'docx',].indexOf(this.data.filetype),
                    src: wordPic,
                    preview: [],
                },
                {
                    test: () => ~['pdf'].indexOf(this.data.filetype),
                    src: pdfPic,
                    preview: [],
                },
                {
                    test: () => ~['xls','xlsx'].indexOf(this.data.filetype),
                    src: excelPic,
                    preview: [],
                },

            ];

            var mapped = config.filter(item => {
                return item.test();
            })[0] || {};

            return mapped;
        },
        infoText() {
            if (this.data.sharereadbj === '1') {
                return '你有新的共享文件！'
            }

            if (this.data.sharereadbj === '4') {
                return '共享文件修改了，请检查是否为最新！'
            }

            if (this.data.gqtxbj === '1') {
                return '即将到期，请及时更换，以免影响投标文件制作！'
            }

            return ''
        },
    },
    methods: {
        delHandler() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                showConfirm('删除后不可撤销，请确认是否删除该文档吗', 'warning', () => {
                    this.$post(`${this.$store.state.api.sysUrl}/file/bidding/plan/del.json`, {
                        rowguid: this.data.rowguid,
                    }, () => {
                        showMsg('删除成功', 'success');
                        this.reloadHandler();
                    });
                });
            });
        },
        editHandler() {
            var that = this;
            
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                var config = [
                    {
                        test: () => ~['jpg', 'jpeg', 'png',].indexOf(this.data.filetype),
                        handler: () => {
                            that.dialogComponent = 'dialog-upload';
                            that.dialogVisible = true;
                        },
                    },
                    {
                        test: () => ~['doc', 'docx',].indexOf(this.data.filetype),
                        handler: () => {
                            that.$emit('word', that.data);
                        },
                    },
                ];

                var mapped = config.filter(item => {
                    return item.test();
                })[0] || {};

                var handler = mapped.handler || function() {};

                handler();
            
            });
        },
        docViewHandler() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.$emit('word', {
                    ...this.data,
                    readonly: true,
                });
            });
        },
        reloadHandler() {
            this.$emit('reload');
        },
        shareHandler() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.dialogComponent = 'dialog-share';
                this.dialogVisible = true;
                this.reloadHandler();
            });
        },
        downloadHandler() {
            // downloader(`${this.$store.state.api.sysUrl}/download/common.do?rowguid=${this.data.rowguid}`);

            this.$store.dispatch('userinfo/checkIsLogin', () => {
                downloader(this.data.filesavepath, this.data.filename);
            });
        },
        copyHandler() {
            this.$store.dispatch('userinfo/checkIsLogin', () => {
                this.$post(`${this.$store.state.api.sysUrl}/file/bidding/plan/copy.json`, {
                    rowguid: this.data.rowguid,
                }, data => {
                    showMsg('复制副本成功');

                    this.reloadHandler();
                });
            });
        },
        setReadHandler() {
            var type;

            if (this.data.sharereadbj === '1') {
                type = 'share';
            }

            if (this.data.sharereadbj === '4') {
                type = 'editshare';
            }

            if (this.data.gqtxbj === '1') {
                type = 'tx';
            }

            this.$post(`${this.$store.state.api.sysUrl}/file/bidding/plan/setread.json`, {
                rowguid: this.data.rowguid,
                type,
            }, data => {
                this.reloadHandler();
            });
        },
    },
};
</script>

<style lang="scss" scoped>
    @import '@css/var.scss';

    .file-item {
        cursor: pointer;
        position: relative;

        & + .file-item{
            margin-top: 28px;
        }

        .body{
            display: flex;

            .preview{
                width: 100px;
                height: 100px;
                margin-right: 8px;
                position: relative;

                .image{
                    width: 100%;
                    height: 100%;
                }

                .icon-share{
                    width: 1.5em;
                    height: 1.5em;
                    background: $primaryColor;
                    color: white;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 12px;
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    top: 0;
                }
            }

            .info{
                flex: 1;
                font-size: 12px;
                display: flex;
                flex-direction: column;

                .head{
                    flex: 1;
                }

                .foot{
                    color: #B3B3B3;

                    .bottom {
                        display: flex;

                        .left{
                            flex: 1;
                        }

                        .right{
                            .btn{
                                display: inline-block;
                                color: $primaryColor;
                                cursor: pointer;

                                & + .btn{
                                    margin-left: 1em;
                                }

                                &:hover{
                                    color: $primaryColor6;
                                }
                            }
                        }
                    }
                }
            }
        }

        .foot{
            margin-top: 6px;

            .btn{
                display: inline-block;
                color: $primaryColor;
                cursor: pointer;
                font-size: 12px;

                & + .btn{
                    margin-left: 1em;
                }

                &:hover{
                    color: $primaryColor6;
                }
            }
        }

        .infotip{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            font-size: 14px;
            width: 100%;
            word-break: break-all;
            text-align: center;
            padding: .5em 1em;

            &.warning{
                color: $warningColor;
                background-color: $warningColor2;

                .btn-close{
                    &:hover{
                        background-color: $warningColor;
                        color: $warningColor2;
                        border-radius: 50%;
                    }
                }
            }
        }
    }
</style>